<template>
    <div class="bg-near-white">
        <h1 class="tc">easy ui</h1>

        <section>
            <h2>Button</h2>
            <div class="bg-white pa3">
                <Button @click="alert('取消')">取消</Button>
                <Button type="primary" @click="alert('确定')">确定</Button>
                <Button type="warn" @click="alert('警告')">警告</Button>

                <Button plain @click="alert('plain 取消')">取消</Button>
                <Button plain type="primary" @click="alert('plain 确定')">
                    确定
                </Button>
                <Button plain type="warn" @click="alert('plain 警告')">
                    警告
                </Button>

                <Button disabled @click="alert('取消')">取消</Button>
                <Button disabled type="primary" @click="alert('确定')">
                    确定
                </Button>
                <Button disabled type="warn" @click="alert('警告')">
                    警告
                </Button>
            </div>
            <div class="bg-white pa3">
                <Button size="mini" @click="alert('mini 取消')"> 取消 </Button>
                <Button size="mini" type="primary" @click="alert('mini 确定')">
                    确定
                </Button>
                <Button size="mini" type="warn" @click="alert('mini 警告')">
                    警告
                </Button>

                <Button plain size="mini" @click="alert('mini plain 取消')">
                    取消
                </Button>
                <Button
                    plain
                    size="mini"
                    type="primary"
                    @click="alert('mini plain 确定')"
                >
                    确定
                </Button>
                <Button
                    plain
                    size="mini"
                    type="warn"
                    @click="alert('mini plain 警告')"
                >
                    警告
                </Button>

                <Button
                    plain
                    disabled
                    size="mini"
                    @click="alert('mini plain 取消')"
                >
                    取消
                </Button>
                <Button size="mini" plain disabled> 56 秒后重新发送 </Button>
            </div>
        </section>

        <section>
            <h2>Cell</h2>
            <div>
                <Cell title="单元格" value="内容" />
                <Cell title="单元格" value="内容" is-link />
            </div>

            <div class="mt-10">
                <Cell title="单元格" value="内容" />
                <Cell title="头像" class="pv2">
                    <template #value>
                        <img
                            src="https://picsum.photos/id/235/200/200"
                            class="br-100 w-avatar db"
                        />
                    </template>
                </Cell>
                <Cell title="单元格" value="内容" is-link />
            </div>
        </section>

        <section>
            <h2>Popup</h2>
            <div class="bg-white pa4">
                <Popup
                    v-model="popup.show"
                    :position="popup.position"
                    :round="popup.round"
                    :close-on-click-overlay="popup.closeOnClickOverlay"
                >
                    <div class="pa4">我是弹窗的内容</div>
                </Popup>

                <label>
                    <input
                        type="checkbox"
                        v-model="popup.closeOnClickOverlay"
                    />
                    点击遮罩是否关闭弹窗
                </label>

                <label>
                    <input type="checkbox" v-model="popup.round" />
                    圆角
                </label>

                <div class="f5 mt3">
                    <div>弹窗出现位置：{{ popup.position }}</div>
                    <div>
                        <label>
                            <input
                                type="radio"
                                value="center"
                                v-model="popup.position"
                            />
                            center
                        </label>
                        <label>
                            <input
                                type="radio"
                                value="top"
                                v-model="popup.position"
                            />
                            top
                        </label>
                        <label>
                            <input
                                type="radio"
                                value="left"
                                v-model="popup.position"
                            />
                            left
                        </label>
                        <label>
                            <input
                                type="radio"
                                value="right"
                                v-model="popup.position"
                            />
                            right
                        </label>
                        <label>
                            <input
                                type="radio"
                                value="bottom"
                                v-model="popup.position"
                            />
                            bottom
                        </label>
                    </div>
                </div>
                <div class="mt3">
                    <Button @click="popup.show = true" type="primary">
                        显示 popup
                    </Button>
                </div>
            </div>
        </section>

        <section>
            <h2>ActionSheet</h2>
            <div class="bg-white pa4">
                <Button type="primary" @click="actionsheet.show = true">
                    显示动作面板
                </Button>
                <ActionSheet
                    v-model="actionsheet.show"
                    :actions="actionsheet.actions"
                    :cancelText="actionsheet.cancelText"
                    :description="actionsheet.description"
                    :descriptionClass="actionsheet.descriptionClass"
                    @select="onActionSheetSelect"
                />
            </div>
        </section>
    </div>
</template>

<script>
import Button from './components/Button/index.vue';
import Cell from './components/Cell/index.vue';
import Popup from './components/Popup/index.vue';
import ActionSheet from './components/ActionSheet/index.vue';

export default {
    name: 'App',
    components: {
        Button,
        Cell,
        Popup,
        ActionSheet,
    },

    data() {
        return {
            popup: {
                /** 是否显示 popup */
                show: false,
                /** 点击遮罩是否关闭弹层 */
                closeOnClickOverlay: true,
                /** 弹窗位置 */
                position: 'center',
                /** 是否出现圆角 */
                round: false,
            },

            actionsheet: {
                description: '确定要退出当前账号吗？',
                descriptionClass: 'green b',
                show: false,
                cancelText: '取消',
                actions: [
                    {
                        name: '退出登录',
                        style: { color: '#f74a4a', fontWeight: '500' },
                    },
                    { name: '让我再想想' },
                ],
            },
        };
    },

    methods: {
        alert(msg) {
            window.alert(msg);
        },

        onActionSheetSelect(action) {
            console.log(action, action.name);
        },
    },
};
</script>

<style>
@import './easyui.common.css';

.w-avatar {
    width: 36px;
    height: 36px;
}

h1 {
    padding-top: 16px;
}

section h2 {
    padding: 32px 16px 16px;
}
</style>
